<template>   
    <div class="bound-veh-background">
        <div @click='hideKeyBoard()'>
    <div style="background: #30AFF7;">
        <van-row type="flex" style="padding: 20px;padding-bottom: 0px;">
            <van-col span="24">
                <div class="bound-veh-tite-text1">绑定车辆</div>
                <div class="bound-veh-tite-text2">绑定您的车辆,以便后续使用</div>
            </van-col>
        </van-row>
        <van-row type="flex" style="padding: 20px;text-align: center;" >
            <van-col span="24"> 
                    <van-field  v-model="plateColor.text" placeholder="车牌号" error-message="" readonly @click.native='selectPlateColor();' class='bound-veh-field-picker'/>
                     <van-field  disabled v-model='carNumber'  center clearable placeholder="请输入车牌号" @click.native.stop='showKeyBoard()' class='bound-veh-field-input'> 
                        <span slot="button" class="bound-veh-field-slottext" @click.stop='save()'>新增</span>
                    </van-field>                                 
            </van-col>
        </van-row>
    </div>
    <van-row type="flex" class='bound-veh-list' style='padding-bottom: 20px'>
        <van-col span="24">
            {{list.length==0?'暂无':''}}车辆列表
            <van-list v-model="loading" :finished="finished" @load="onLoad" >
              <!-- v-carplate='[item.vehNo,item.platColor]' -->
                <van-cell class='bound-veh-cellCenter' v-for="item in list" :key="item.id"  v-carplate-text='[item.plateNo,item.plateColor]' >

                </van-cell>
            </van-list>
        </van-col>
    </van-row>
</div>
    <van-popup v-model="show" position="bottom" :overlay="false">
        <van-row style='padding: 1%;margin: 0px' v-show="showTyper==1" gutter="5">
            <van-col v-for="i in provinces" span='3'   style='margin-top: 0.2%;' @click.native='input(i)'>
                <div align="center" class="bound-veh-keyboardcell" :style="[{backgroundColor:(i=='关闭' ? '#30AFF7' : '')},{color:(i=='关闭' ? '#ffffff' : '')}]" 
                :class="{ 'bound-veh-keyboardactive': i==active }" >
                    {{i}}
                </div>
            </van-col>
        </van-row>
        <van-row style='padding: 1%;margin: 0px' v-show="showTyper==2" >            
            <div class="bound-veh-keyBoard-num">
                <span class="bound-veh-keyBoard-numkey bound-veh-keyBoard-numkeywidth" v-for="i in keyNums"  @click='input(i)' :class="{ 'delete-button': i=='×' ,'bound-veh-keyboardactive': i==active }" 
                    >{{i}}</span>
                    <!-- :style='{"margin-left":{A:"5%",Z:"10%"}[i]}' -->
            </div>
        </van-row>
        <span @click='hideKeyBoard()' class="bound-veh-keyboardbutton">
            完成
        </span>
    </van-popup>
    <van-popup v-model="showGetPlateColor" style='width:90%'>
            <van-picker ref='boundVehicleSelectPlateColor' @change="getPlateColor"  show-toolbar title="选择车牌颜色" :columns="columns" @cancel="hidenPlateColor()" @confirm="hidenPlateColor()" />
    </van-popup>
</div>
</template>
<script >
import { CarManageService ,GuidanceService} from './api';
import { ImagePreview } from 'vant';
import { Toast } from 'vant';
export default {
    name: 'boundVehicle',
    data() {
        return {    
        initSelectPlateColor:false,          
            itemCount:1,         
            loading: false,
            finished: false,
            show: false,           
            list: [],
            showTyper: 0,    //输入法的值，0表示不显示，1表示显示省输入键盘，2表示显示数字字母输入键盘
            provinces:["京","沪","浙","苏","粤","鲁","晋","冀",    //省
                "豫","川","渝","辽","吉","黑","皖","鄂",
                "津","贵","云","桂","琼","青","新","藏",
                "蒙","宁","甘","陕","闽","赣","湘","关闭"],
            keyNums:["0","1","2","3","4","5","6","7","8","9",     //数字字母
                "A","B","C","D","E","F","G","H","J","K","L","M","N",
                "P","Q","R","S","T","U","V","W","X","Y","Z","挂","学","警","港","澳","×"],
            showGetPlateColor:false,
            carNumber:'',
            plateColor:{ text: '蓝色', value: 2},
            active:'',
            columns:[
                        {
                          values:[            { text: '白色', value: 0 } ,
                            { text: '黄色', value: 1 } ,
                            { text: '蓝色', value: 2 ,defaultIndex:2} ,
                            { text: '黑色', value: 3 },
                            { text: '绿色', value: 4 } ,
                            { text: '其他颜色', value: 9 }],                          
                          defaultIndex: 2
                        }           
             ],
             zqOpenId:'',
        };
    },
    created() {
      this.zqOpenId=this.$route.params.zqOpenId;
    },
    updated (){                
     },
    methods: {
        onLoad() {
             CarManageService.findCommonCars(this.zqOpenId).then((res) => {
                this.list = res;               
            }, (err) => {
            });
            this.loading=false;
          this.finished=true; 
        },              
        showKeyBoard() {
            this.show = true;
            this.showTyper = 1;
            this.changeTyper();
        },
        hideKeyBoard() {
            this.show = false;
            this.showTyper = 0;
        },
        input:function (item) {
                if(item=='OK'||item=='关闭'){    //判断是否点击了关闭按钮
                    this.show=false;
                    this.showTyper = 1;
                    return;
                }
                if (item=='×'){
                    this.carNumber = this.carNumber.slice(0,-1);
                    this.changeTyper();
                    this.active=this.carNumber.charAt(this.carNumber.length-1)
                    return;
                }
                if(this.carNumber.length<8){    //判断当前的车牌号的数目是否合法，还未超出7位则可继续输入
                    this.carNumber=this.carNumber+item;
                    this.changeTyper();
                    this.active=item;
                }else {
                    Toast.fail('车牌号码超出正常范围');
                }
            },
             changeTyper:function () {
                if(this.carNumber.length>=1){
                    this.showTyper = 2;
                }
                if(this.carNumber.length==0){
                    this.showTyper = 1;
                }
            },
            save: function () {                 
                this.show = false;
                this.showTyper = 0;
                var carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/;
                if (!carNumberReg.test(this.carNumber)) {
                     Toast.fail('请输入正确的车牌号码');
                     this.showKeyBoard();
                    return;
                }else{
                    if(!this.plateColor||!this.plateColor.text){
                    Toast.fail('请选择车牌颜色');                    
                    return;
                    }
                    let saveData={
                        'openid':this.zqOpenId,
                         'isDefault':(this.list.length<1?1:0),
                          'plateColor':this.plateColor.value,
                           'plateNo':this.carNumber

                    }
                     CarManageService.bindCar(saveData).then((res) => {
                         Toast.success('车牌绑定成功');
                        this.onLoad();               
                    }, (err) => {
                        Toast.fail(err.responseJSON.msg);
                    });
                }
            },
            selectPlateColor(){
                this.showGetPlateColor=true;           

            },  
            hidenPlateColor(){
                this.showGetPlateColor=false;
            },           
            getPlateColor( picker, value, index) {
                this.plateColor=value[0];
            }

         },
         watch:{
            showGetPlateColor(newVal,oldVal){

            }
         }
};
</script>
<style scoped>
.bound-veh-background {
    position: relative;
    top: 0px;
    left: 0px;
    background: #f7f6f6;
    min-height: 100vh;
}

.bound-veh-tite-text1 {
    font-size: 23px;
    color:#FFFFFF;
    margin-bottom: 13px;
}
.bound-veh-tite-text2 {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 21px;
}
.bound-veh-field {
    border: 1px solid #30AFF7;
    border-radius: 8px;
}

.bound-veh-field-slottext {
    color: #3DA6FF;
    font-size: 20px;
}

.bound-veh-field-picker{
    display: inline-block;
    width: 16%;
    height: 100%;
    border-bottom-left-radius: 8px; 
    border-top-left-radius: 8px;
}
.bound-veh-field-input{
    display: inline-block;
    width: 83%;
    height: 100%; 
    border-bottom-right-radius: 8px; 
    border-top-right-radius: 8px;
}

@media screen and (max-width: 487px) {
    .bound-veh-field-picker{
    width: 19%;
        }
    .bound-veh-field-input{
    width: 77%;
    }
}
@media screen and (max-width: 305px) {
    .bound-veh-field-picker{
    width: 23%;
        }
    .bound-veh-field-input{
    width: 74%;
    }
}
@media screen and (max-width: 275px) {
    .bound-veh-field-picker{
    width: 26%;
        }
    .bound-veh-field-input{
    width: 70%;
    }
}

.bound-veh-list {
    color: #3DA6FF;
    text-align: center;
    margin: 20px;
}

.bound-veh-keyboardcell {
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid #dfdfdf;
    height: 35px;
     width: 1%;
    color: #30AFF7;
}

.bound-veh-keyboardbutton {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px;
    height: 22px;
    text-align: center;
    padding: 5px;
    width: 100%;
    display: inline-block;
}

.bound-veh-cellCenter{
  text-align: center;
  display: inline-block;
}

.bound-veh-keyBoard-num{
    text-align: center;
    display: table;
    width: 100%;
}

.bound-veh-keyBoard-numkey{
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #dfdfdf;
    line-height: 35px;
    color: #30AFF7;
    float: left;
}

.bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.4%
}




@media screen and (max-width: 1035px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.36%
    }
}

@media screen and (max-width: 725px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.33%
    }
}
@media screen and (max-width: 603px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.3%
    }
}

@media screen and (max-width: 506px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.27%
    }
}

@media screen and (max-width: 443px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8.9%;
    margin: 0.25%
    }
}

@media screen and (max-width: 340px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8.8%;
    margin: 0.22%
    }
}

@media screen and (max-width: 267px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8.6%;
    margin: 0.2%
    }
}

@media screen and (max-width: 203px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8.3%;
    margin: 0.15%
    }
}

@media screen and (max-width: 144px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8%;
    margin: 0.1%
    }
}

@media screen and (max-width: 125px) {
    .bound-veh-keyBoard-numkeywidth{
    width: 8%;
    margin: 0.05%
    }
}
.delete-button{
    background-color: #30AFF7;
    color: red;
    font-weight: bold; 
    /*font-size: 10vh;*/
    font-size: 200%;
}
.bound-veh-keyboardactive{
     background-color: #30AFF7;
     color: #ffffff;
}
</style>
